<template>
  <div v-if="this.$route.name == 'companyEdition'" class="app-container">
    <vue-element-loading
      :active="this.$store.state.elementloading.vueElementLoading"
      spinner="spinner"
      color="#FF6700"
    />
    <el-card shadow="never">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchMap"
        style="margin-top: 20px;margin-left: 0px"
      >
        <el-form-item prop="companyName">
          <el-input @keyup.enter.native="searchcompany" v-model.lazy="searchMap.companyName">
            <template slot="prepend">公司名称</template>
          </el-input>
        </el-form-item>
        <el-button @click="searchcompany" icon="el-icon-search"></el-button>
      </el-form>

      <template>
        <el-table
          :data="list"
          max-height="500"
          border
          style="width: 100%;margin-top:10px"
          @row-click="chooseone"
          highlight-current-row
        >
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">
                <span class="el-radio__label"></span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="eTime" label="版本时间" width="100"></el-table-column>
          <el-table-column prop="cName" label="公司名称" width="140"></el-table-column>
          <el-table-column prop="cPerson" label="公司负责人" width="100"></el-table-column>
          <el-table-column prop="cContact" label="联系方式" width="130"></el-table-column>
          <el-table-column prop="cMedicinal" label="种植品种" align="center" width="150"></el-table-column>
          <el-table-column prop="cRemarks" label="公司简介" align="center"></el-table-column>
          <el-table-column fixed="right" prop="cPosition" label="公司位置" align="center"></el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,20,30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import companyEditionApi from "@/api/companyEdition";
import VueElementLoading from "vue-element-loading";
export default {
  components: {
    VueElementLoading
  },
  data() {
    return {
      list: [],
      total: 0, //总记录数
      currentPage: 1, //当前页码
      pageSize: 5, //每页显示10条数据
      radio: null, // 如果使用单选框，定义一个model值
      searchMap: {
        companyName: ""
      },
      pojo: {
        cName: "",
        page: "",
        size: "",
        eTime: ""
      }
    };
  },

  created() {
    this.fetchData();
  },

  watch: {
    $route(to, from) {
      this.fetchData();
    }
  },

  methods: {
    chooseone(row) {
      this.radio = row.id;
      this.backup = this.pojo = row;
    },
    // 当每页显示条数改变后，被触发，val是最新的显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后，被触发，val是最新的页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.fetchData();
    },
    searchcompany() {
      this.currentPage = 1;
      this.fetchData();
    },
    fetchData() {
      var vm = this.$store;
      vm.commit("updateLoading", true);
      console.log(
        "是否开启加载",
        this.$store.state.elementloading.vueElementLoading
      );
      this.pojo.cName = this.searchMap.companyName;
      this.pojo.page = this.currentPage;
      this.pojo.size = this.pageSize;
      this.pojo.eTime = localStorage.getItem("eTime");
      companyEditionApi.select(this.pojo).then(resp => {
        this.list = resp.data.rows;
        this.total = resp.data.total;
        if (resp.data.rows) {
          vm.commit("updateLoading", false);
          console.log(
            "是否开启加载",
            this.$store.state.elementloading.vueElementLoading
          );
        }
      });
    }
  }
};
</script>